<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app" :id="age">
    <p>{{message}}</p>
</div>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script>
   var app = document.getElementById('app');
   console.log(app.innerHTML);
   console.log(app.outerHTML)
   var vm = new Vue({
    el:'#app',
    data:{message:'hello',age:18},
    methods:{changeMessage(){}},
    computed:{doubleAge(){return this.age*2}},
    beforeCreate(){
        //它会在Vue实例初始化之后，在数据观测和event/watcher配置之前调用
        console.log(`beforeCreate`,this.$data)
    },
    created(){
        //它会在实例创建完成后被立刻调用，完成了数据观测，属性和方法的计算，watcher/event已经初始化好了
        console.log('created','data',this.$data,'changeMessage',this.changeMessage,'doubleAge',this.doubleAge)
    },
    beforeMount(){
        //在实例挂载前开始调用 可以进行一些数据计算，数据转换
        //Vue内部会编译模板，把它变成一个render函数，render函数执行以后会得到一个虚拟DOM
        //它会模板编译成render之后，render函数执行前调用
        console.log('beforeMount');
        //this.message = 'world'
    },
    mounted(){
        //从虚拟DOM生成真实DOM，然后把真实DOM挂载页面中，触发mounted
        //this.$el 是创建的真实DOM
        console.log('mounted',this.$el)
    },
    beforeUpdate(){
        //是在数据更新时调用，发生成DOM修改前
        console.log('beforeUpdate',this.$el.innerText)
    },
    updated(){
        console.log('updated',this.$el.innerText)
    },
    beforeDestroy(){
        //在实例销毁前调用,此时实例依然可用
        console.log('beforeDestroy')
    },
    destroyed(){
        //会在Vue实例销毁之后调用 当调用此钩子的时候，Vue实例所有 指向东西都会解绑或者说释放，所有的事件监听都会移除
        console.log('destroyed')
    }
   });
</script>
</body>
</html>